<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        /*
            onload 
                -加载完毕事件


        
        */
        console.log(0);
        //    窗口里面内容加载完毕以后 onload 就会执行 后面的函数
        window.onload = function () {
            // 在页面中最后执行
            console.log('onload');
            var btn = document.querySelector("button");
            console.log(btn);//btn
        }

        console.log(11);


        // 因为代码是从上往下执行的， 执行获取按钮代码的时候， 按钮还没有出现，获取结果为null
        var btn = document.querySelector("button");
        console.log(btn);//null 
        //
        // Uncaught TypeError: Cannot read properties of null (reading 'style')
        // btn.style.color = 'red'
    </script>

    <button>
        按钮
    </button>



</body>

</html>